<template>
  <div id="newDet" class="main" v-loading="detLoading">
    <div class="contaier">
      <div class="left-contaier">
        <h1 style="margin: 20px 0">{{ newDetailData.title }}</h1>
        <newDetHead :headData="newDetailData" />
        <div v-html="newDetailData.content"></div>
      </div>
      <div class="right-list">
        <hotList
          :hostDataList="hostDataList"
          :url="'/news/detail'"
          linkType="link"
          type="1"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getNewsDetail, getHotNews } from '@/api/news/news';
import newDetHead from '@/components/newDetHead';
import hotList from '@/components/HotList';

import { ref } from 'vue';
import { useRoute } from 'vue-router';
const detLoading = ref(false);
const route = useRoute();
const hostDataList = ref({
  title: '更多推荐',
  hotList: [],
  imgUrl: '',
});
let reqNewData = ref({
  page: 1,
  pageSize: 10,
});
const newDetailData = ref({});

const fetchNewsDetail = () => {
  detLoading.value = true;
  getNewsDetail({ id: route.query.id })
    .then((res) => {
      if (res.data.code == 20000) {
        detLoading.value = false;
        newDetailData.value = res.data.data;
        document.title = res.data.data.title;
      } else {
        detLoading.value = false;
      }
    })
    .catch(() => {
      detLoading.value = false;
    });
};
fetchNewsDetail();
const fetchHotNews = () => {
  getHotNews(reqNewData.value)
    .then((res) => {
      if (res.data.code == 20000) {
        hostDataList.value.hotList = res.data.data;
      }
    })
    .catch(() => {});
};
fetchHotNews();
</script>

<style lang="scss" scoped>
#newDet {
  padding: 20px;
  .contaier {
    display: flex;
  }
  .right-list {
    width: 300px;
    margin: 0px 0 0 40px;
  }
}
</style>
